<template>
	<view class="container">
		<hb-header flex-bg-color="#fff">
			<view class="arrow-left" slot="left">
				<view class="uni-page-head-btn"><i class="uni-btn-icon"
						style="color: rgb(0, 0, 0); font-size: 27px;"></i></view>
			</view>
			<text slot="title" class="header-title">{{$t('password.transaction')}}</text>
			<view class="share-icon" slot="right">
				<view @click="onNative">{{$t('password.find')}}</view>
			</view>
		</hb-header>
		<view class="form">
			<view class="title">{{$t('password.transModify')}}</view>
			<view class="form-item-wrap">
				<view class="form-item">
					<hb-input v-model="form.old_password" :label="`${$t('old_password')}`" type="password"
						:placeholder="`${$t('old_password.place')}`"></hb-input>
				</view>
				<view class="form-item">
					<hb-input v-model="form.new_password" :label="`${$t('new_password')}`" type="password"
						:placeholder="`${$t('new_password.place')}`"></hb-input>
				</view>
				<view class="form-item">
					<hb-input v-model="form.new_password_confirmation" :label="`${$t('new_password.sure')}`" type="password"
						:placeholder="`${$t('new_password.sure.place')}`"></hb-input>
				</view>
				<view class="title title1">
					{{$t('getCode')}}
					<text>{{$t('codeTips')}}</text>
				</view>
				<view class="form-item codes">
					<input type="text" v-model="form.smsverify" :placeholder="`${$t('inputCode')}`">
					<view class="code" v-if="again == true" @click="getVerification">
						{{codeShow ? $t('register.recode') : time+'S'}}
					</view>
					<view class="code" v-else @click="getVerification">{{codeShow ? $t('getCode') : time+'S'}}</view>
				</view>
				<view class="tips">
					{{$t('info.modifyTr')}}
				</view>
				<view class="footer-wrap">
					<view class="buttonBg" @click="setNewPassword" :loading="loading">{{$t('password.sure')}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userPasswordCecondary
	} from '@/api/password'
	import {
		authCode
	} from '@/api/auth'
	import {
		mapState
	} from 'vuex'
	import base64Code from '@/plugin/base64code.js';
	export default {
		data() {
			return {
				loading: false,
				error: '',
				form: {
					old_password: '',
					new_password: '',
					new_password_confirmation: '',
					smsverify: ''
				},
				again: false, 
				codeShow: true,
				time: 60,
				forbid: true,
			}
		},
		onShow() {
			this.Locale = uni.getLocale()
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo
			})
		},
		methods: {
			onNative() {
				uni.navigateTo({
					url: `/pages/my/password/find?type=1`
				})
			},
			getVerification() {
				if (!/^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/.test(this.userInfo.username)) {
					uni.showModal({
						title: this.$t('info.reminder'),
						content: this.$t('pass.emailTips'),
						showCancel: false
					});
					return;
				} else {
					if (this.forbid) {
						var time = Math.round(new Date().getTime() / 1000);
						var data = {
							username: base64Code.adds(time, this.userInfo.username),
							time: time
						}
						authCode(data).then((res) => {
							this.forbid = false;
							uni.showModal({
								title: this.$t('info.reminder'),
								content:`${this.$t('info.modifyTrCode')}：${this.userInfo.username}`,
								showCancel: false
							});
							this.codeShow = false;
							uni.hideLoading();
						}).catch(() => {
							uni.hideLoading();
							this.forbid = true;
							this.codeShow = true;
						});
					} else {
						uni.showModal({
							title: this.$t('info.reminder'),
							content: this.$t('info.noRepeat'),
							showCancel: false
						});
					}
				}
			},
			setNewPassword() {
				if (this.form.old_password == '') {
					uni.showModal({
						content: this.$t('old_password.place'),
						showCancel: false
					});
					return;
				}
				if (this.form.new_password == '') {
					uni.showModal({
						content: this.$t('new_password.place'), 
						showCancel: false
					});
					return;
				}
				this.loading = true;
				var time = Math.round(new Date().getTime() / 1000);
				var data = {
					old_password: base64Code.adds(time, this.form.old_password),
					new_password: base64Code.adds(time, this.form.new_password),
					new_password_confirmation: base64Code.adds(time, this.form.new_password_confirmation),
					smsverify: base64Code.adds(time, this.form.smsverify),
					time: time
				}
				userPasswordCecondary(data).then(() => {
					this.loading = false;
					uni.showModal({
						content:this.$t('pass.modifytrasac'),
						showCancel: false,
						success(res) {
							if(res.confirm){
								uni.reLaunch({
									url: '/pages/home/index'
								});
							}
						}
					});
					
				}).catch((error) => {
					this.error = error.msg;
					this.loading = false;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tips{
		font-size:24rpx;
		color: #333;
	}
	.hb-header {
		.header-title {
			color: $hb-text-black-color;
		}

		.share-icon {
			// padding-right:20rpx;
			color: $hb-primary-color;
		}

		.arrow-icon {
			display: block;
			width: 46rpx;
			height: 46rpx;
		}

	}

	.container {
		// background: $hb-bg;
		min-height: 100%;
		overflow: hidden;

		.form {
			padding: 0 32rpx;

			.title {
				padding-top: 20rpx;
				font-size: 28rpx;
				color: $hb-text-black-color;
				font-family: HarmonyOS_Sans_SC_Bold;

				text {
					font-size: 24rpx;
					color: $hb-red;
					display: inline-block;
					margin-left: 10rpx;
					vertical-align: middle;
					font-family: HarmonyOS_Sans_SC_Regular
				}

				&.title1 {
					padding: 32rpx 0;
				}
			}

			.form-item-wrap {
				padding: 32rpx 0;
			}

			.form-item {
				margin-bottom: 24rpx;
				position: relative;

				&.codes {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;
					border: .5px solid #f5f5f5;

					input {
						font-size: 28rpx;
					}

					.code {
						font-size: 28rpx;
						color: $hb-primary-color;
					}
				}
			}

			.error-wrap {
				height: 60rpx;
				text-align: right;

				.error {
					display: block;
					color: #f00;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

		}

		.footer-wrap {
			padding: 0 30rpx;
		}
	}
</style>
